<template>
	<div id="cinema">
		<div class="nav">
			<span>全部<i class="fa fa-caret-down"></i></span>
			<span>品牌<i class="fa fa-caret-down"></i></span>
			<span>特色<i class="fa fa-caret-down"></i></span>
		</div>
		<div>
			<ul>
				<li v-for="item in CinemaList" :key="item.id">
					<p>
						<span>{{item.name}}</span>
						<span class="price">{{item.price}}</span>
						<span class="price-desc">元起</span>
					</p>
					<p class="address">
						<span>{{item.address}}</span>
						<span>>{{item.distance}}km</span>
					</p>
					<p class="tips">
						<span>小吃</span>
						<span>折扣卡</span>
					</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default{
	name: 'Cinema',
	methods:{
		getCinemaData(){
			var that = this;
			axios.get('/mock/api.json')
			  .then(function (response) {
			    console.log(response);
				if(response.status == 200){
					if(response.data && response.data.CinemaList){
						that.CinemaList = response.data.CinemaList;
					}
				}
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
		}
	},
	created(){
		this.getCinemaData();
	},
	data(){
		return{
			CinemaList: []
		}
		
	}
}
</script>

<style scoped>
	#cinema{
		padding-top: 50px;
	}
	.nav span{
		width: 33%;
		display: inline-block;
		text-align: center;
		height: 45px;
		line-height: 45px;
	}
	.nav{
		border-bottom: 1px solid #ccc;
	}
	i{
		margin-left: 5px;
	}
	li{
		margin: 10px;
		/* padding: 10px;s */
		border-bottom: 1px solid #ccc;
	}
	.price{
		color: #e54847;
		margin: 0 10px;
	}
	.pricr-desc{
		color: #e54847;
		font-size: 12px;
	}
	.address span{
		font-size: 12px;
		color: #999;
	}
	.address span:last-child{
		float: right;
	}
	.tips span{
		border: 1px solid #f90;
		color: #f90;
	}
	.tips{
		margin: 10px 0;
	}
</style>
